<template>
  <cs-container :is-back-to-top="true">
    <div class="cs-p">
      <el-row>
        <el-col class="logTop">
          <!-- 按钮组 -->
          <el-button-group>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-circle-plus-outline"
              @click="addOrUpdate('')">新增</el-button>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-delete"
              @click="handleDelete"
              :disabled="isDisabled">删除</el-button>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-edit"
              @click="batchEdit"
              :disabled="isDisabled">批量修改</el-button>
          </el-button-group>
          <!-- 搜索框 -->
          <el-input size="small" placeholder="设备地址 | 采集器地址" v-model="search" class="searchInput">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
      </el-row>
      <el-row class="tableRow">
        <el-col>
          <!-- 表格区域 -->
          <cs-table :table-data="currentTableData"
                    :table-label="tableLabel"
                    @handleButton="handleButton"
                    @handleSortChange="handleSortChange"
                    @handleSelectionChange="handleSelectionChange"
                    :table-option="tableOption">
            <!-- <template slot="tag" slot-scope="scope">
              <el-tag type="mini"
                v-for='(items, index) in scope.row.assetsTagEntities'
                :key='index'
                :color="items.color">{{items.name}}</el-tag>
            </template> -->
          </cs-table>
          <!-- 分页区域 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-sizes="[10, 15, 20, 30]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </el-col>
      </el-row>
      <!-- 新增、修改弹框 -->
      <add-or-update ref="addOrUpdateDialog"></add-or-update>
    </div>
  </cs-container>
</template>

<script>
import CsTable from '@/components/cs-table'
import addOrUpdate from './dialog/addOrUpdate.vue'
export default {
  name: 'setting-setting-system',
  data() {
    return {
      search: '',
      loading: false,
      currentTableData: [
        { address: '2019-05-06', type: '小龙龙', collectorAddress: '123', event: 'III', code: '2', separator: '192.168.32.14', alarmTime: 'windows', accessTime: '在线', lastTime: '虚拟机' }
      ],
      tableLabel: [
        { label: '设备地址', param: 'address', align: 'center', sortable: true, isShow: true, width: '150' },
        { label: '设备类型', param: 'type', align: 'center', isShow: true },
        { label: '采集器地址', param: 'collectorAddress', align: 'center', sortable: false, isShow: true },
        { label: '事件量', param: 'event', align: 'center', sortable: false, isShow: true },
        { label: '编码', param: 'code', align: 'center', sortable: false, isShow: true },
        { label: '分隔符', param: 'separator', align: 'center', sortable: false, isShow: true },
        { label: '告警时长(分钟)', param: 'alarmTime', align: 'center', sortable: false, isShow: true },
        { label: '接入时间', param: 'accessTime', align: 'center', sortable: false, isShow: true },
        { label: '最后活跃时间', param: 'lastTime', align: 'center', sortable: false, isShow: true }
      ],
      tableOption: {
        label: '操作',
        width: '190',
        options: [
          { label: '编辑', type: 'primary', icon: 'el-icon-edit', methods: 'audit', auth: 'sys:group:update' },
          { label: '删除', type: 'danger', icon: 'el-icon-delete', methods: 'delete', auth: 'sys:group:delete' }
        ]
      },
      // 分页参数
      pageNo: 1,
      pageSize: 10,
      total: 0,
      // 多选的id数组
      ids: []
    }
  },
  components: {
    CsTable,
    addOrUpdate
  },
  computed: {
    isDisabled() {
      return this.ids.length === 0
    }
  },
  methods: {
    // 判断操作栏按钮
    handleButton(methods, row, index) {
      if (methods.methods === 'audit') {
        // 修改
        this.handleUpdate(methods.row)
      } else if (methods.methods === 'delete') {
        // 删除
        this.handleDelete(methods.index)
      }
    },
    // 新增
    addOrUpdate(data) {
      this.$refs.addOrUpdateDialog.init(true, data)
    },
    // 修改
    handleUpdate(data) {
      this.$refs.addOrUpdateDialog.init(true, data)
    },
    // 批量修改
    batchEdit() {
      this.$refs.addOrUpdateDialog.init(true)
    },
    // 删除
    handleDelete() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(333333)
      }).catch(() => {
      })
    },
    handleSortChange() {
    },
    // 多选操作
    handleSelectionChange(val) {
      this.ids = val.map(item => {
        return item.code
      })
    },
    // 分页参数
    handleSizeChange() {
    },
    handleCurrentChange() {
    }
  }
}
</script>

<style lang="scss" scoped>
  .logTop {
    display: flex;
    justify-content: space-between;
    .searchInput {
      width: 25%;
      // margin-right: 50px;
    }
  }
  .tableRow {
    margin-top: 20px;
  }
  .el-pagination {
    margin-top: 10px;
  }
</style>
